<template>
  <layout title="loading加载动画">
    <layout-content title="基础使用">
      <view class="tn-flex">
        <view>
          <tn-loading show></tn-loading>
        </view>
        <view class="tn-margin-left-sm">
          <tn-loading show mode="flower"></tn-loading>
        </view>
      </view>
    </layout-content>

    <layout-content title="设置尺寸">
      <view class="tn-flex">
        <view><tn-loading show size="sm"></tn-loading></view>
        <view class="tn-margin-left-sm"><tn-loading show></tn-loading></view>
        <view class="tn-margin-left-sm"><tn-loading show size="lg"></tn-loading></view>
        <view class="tn-margin-left-sm"><tn-loading show size="xl"></tn-loading></view>
      </view>
      <view class="tn-flex tn-margin-top-sm">
        <view><tn-loading show mode="flower" size="sm"></tn-loading></view>
        <view class="tn-margin-left-sm"><tn-loading show mode="flower"></tn-loading></view>
        <view class="tn-margin-left-sm"><tn-loading show mode="flower" size="lg"></tn-loading></view>
        <view class="tn-margin-left-sm"><tn-loading show mode="flower" size="xl"></tn-loading></view>
      </view>
      <view class="tn-flex tn-margin-top-sm">
        <view><tn-loading show size="50"></tn-loading></view>
        <view class="tn-margin-left-sm"><tn-loading show mode="flower" size="80"></tn-loading></view>
      </view>
    </layout-content>
    
    <layout-content title="设置颜色">
      <view class="tn-flex">
        <view><tn-loading show color="#01BEFF"></tn-loading></view>
      </view>
    </layout-content>

    <layout-content title="禁止运动">
      <view class="tn-flex">
        <view>
          <tn-loading show :animation="false"></tn-loading>
        </view>
        <view class="tn-margin-left-sm">
          <tn-loading show mode="flower" :animation="false"></tn-loading>
        </view>
      </view>
    </layout-content>
  </layout>

  <layout-doc v-model="showDoc" :content="docContent"></layout-doc>
  <doc-fab @click="handleDocFabClick"/>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { docContent } from './lib/doc'
import Layout from '@/components/layout/index.vue'
import LayoutContent from '@/components/layout/content.vue'
import LayoutDoc from '@/components/layout/doc.vue'
import DocFab from '@/components/doc-fab/index.vue'

import TnLoading from '@/tuniao-ui/components/tn-loading/src/Loading.vue'

// 弹出文档 
let showDoc = ref<boolean>(false)
const handleDocFabClick = () => {
  showDoc.value = true
}
</script>

<style lang="scss" scoped>
</style>
